<script>
import { ElMessage } from 'element-plus'
import qs from 'qs';
export default {
  name: "LoginView",
  data() {
    return {
      form: { username: '', password: '' } // username=xxx&password=xx
    };
  },
  methods: {
    login() {
      // 调用登录后台方法
      this.$axios.post('/login', this.$qs.stringify(this.form))
          .then(result => {
            console.log('login', result.data);
            // 判断是否连接成功
            if (result.data.status === 200) {
              // 判断用户是否存在
              if (result.data.data) {
                this.$router.push('/index'); // 跳转到 IndexView.vue
                // 跳转到主界面
                ElMessage('登录成功');
              } else {
                ElMessage.error('账号或密码错误');
              }
            }
          })
          .catch(error => {
            console.error('登录失败:', error);
            ElMessage.error('登录失败，请稍后再试');
          });
    }
  }
};
</script>

<template>
<el-card style="max-width: 480px;margin: 200px auto">
  <h1>欢迎登录学生管理系统</h1>
  <el-from :model="from" label-width="auto" style="max-width:480px">
    <el-form-item label="账户">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" type="password"/>
    </el-form-item>
      <el-from-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-from-item>
  </el-from>
</el-card>>
</template>

<style scoped>

</style>